<template>
  <div class="quotesDetail">
    <x-header :left-options="{showBack: false}">{{currencyPair}}</x-header>
    <img src="../../assets/navBar.png" alt="" width="10" class="navBtnetf" @click="backBtnetf">
    <div class="quotateBox">
      <div style="float: left;margin-right: 15px;padding-left: 10px; margin-top: 10px;">
        <div>
          <span style="font-size: 25px;color: #ff1010;" v-if="quotationObj">{{quotationObj.close}}</span>
        </div>
        <div>
          <span style="color: #ff1010;" v-if="quotationObj">{{quotationObj.changeValue}}</span>&nbsp;&nbsp;
          <span style="color: #ff1010;" v-if="quotationObj">{{quotationObj.change}}%</span>
        </div>
      </div>
      <div style="padding-top: 15px;">
        <div v-if="quotationObj">高
          <span style="color: #7ed321">{{quotationObj.highest}}</span>
        </div>
        <div style="margin-top:10px;" v-if="quotationObj">低
          <span style="color: #ff1010;">{{quotationObj.lowest}}</span>
        </div>
      </div>
    </div>
    <div style="width:100%;height: 400px;">
      <ve-candle :data="chartData" :settings="chartSettings"></ve-candle>
    </div>
    <div class="quotesTitle">
      <div style="border-bottom: 1px solid #f6f6f6;padding-left:10px">
        <span class="c3" :class="{activeColor:quotation}" @click="quotation=!quotation">行情</span>
        <span style="margin-left:30px;" class="c3" :class="{activeColor:!quotation}" @click="quotation=!quotation">简介</span>
      </div>
    </div>
    <div v-if="quotation">
      <ul class="transactionTitle clearfix" style="font-size: 13px">
        <li>平台/24h成交</li>
        <li>最新价</li>
        <li>涨跌幅</li>
        <div style="clear:both "></div>
      </ul>
      <ul class="transactionContTwo clearfix">
        <div class="fr" v-for="curr in currencyList" @click="getCurr(curr)">
          <li>
            <div style="margin-top:8px;">
              <img :src="curr.iconUrl" alt="" width="20" style="vertical-align: middle;">
              <span class="f15 c6">{{curr.currencyPair}}</span>
              <div style="margin-left: 30px;font-size: 12px;">{{curr.exchange}}</div>
            </div>
          </li>
          <li>
            <div class="f15 c6" style="margin-top: 15px;">
              <span>¥{{curr.prices.cny}}</span>
            </div>
          </li>
          <li>
            <div style="margin-right:10px;margin-top: 15px;">
              <div class="negativeOne" v-if="curr.change<0" style="color: #fff">{{curr.change}}%</div>
              <div class="positiveOne" v-if="curr.change>=0" style="color: #fff">{{curr.change}}%</div>
            </div>
          </li>
          <div style="clear:both "></div>
        </div>
      </ul>
    </div>
    <ul class="contQuotes" v-if="!quotation">
      <!-- <li class="fr">
        <span>简介</span>
        <span class="fa r10 quotestext">SCRT是一种加密货币，可食用鱼多款休闲产品</span>
      </li> -->
      <li class="fr" v-if="introduction.circulatingSupply">
        <span>流通量</span>
        <span class="fa r10 quotestext">{{introduction.circulatingSupply}}万</span>
      </li>
      <li class="fr" v-if="introduction.totalSupply">
        <span>总发行量</span>
        <span class="fa r10 quotestext">{{introduction.totalSupply}}万</span>
      </li>
      <li class="fr" v-if="introduction.marketCap">
        <span>流通市值</span>
        <span class="fa r10 quotestext">¥{{introduction.marketCap}}万</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import io from 'socket.io-client'
  import axios from 'axios'
  import VCharts from 'v-charts'
  import VeCandle from 'v-charts/lib/candle.common'

  export default {
    data() {
      this.chartSettings = {
        showMA: true,
        showVol: true,
        showDataZoom: true,
      }
      return {
        introduction: "",//简介
        quotation: true,
        currencyPair: "",
        exchangeName: "",
        quotationObj: {},
        quotationList: [],
        currencyList: [],
        chartData: {
          columns: ['日期', 'open', 'close', 'lowest', 'highest',],
          rows: [
            // { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 }
          ]
        },
        socket: ""
      }
    },
    mounted() {
      this.exchangeName = this.$route.query.exchangeName
      this.currencyPair = this.$route.query.currencyPair;
      if (this.exchangeName == '全网') {
        this.exchangeName = 'global'
      }
      this.socket = io("http://47.52.145.241:9092/ticker", { transports: ['websocket', 'xhr-polling', 'jsonp-polling'] });
      this.socket.on('connect', () => {
        this.socket.emit('subscribe', this.exchangeName + '.' + this.currencyPair + '.minute');
      });
      this.socket.on('data', (data) => {
        this.quotationObj = data;
      });
      this.getHistoricalData();
      this.getTypeCurrency();
      this.getIntroduction();
    },
    methods: {
      backBtnetf() {
        history.back();
      },
      // 查询历史数据 展示k线图
      getHistoricalData() {
        var date = new Date();
        if (date.getHours() < 6) {
          var historyDate = date.getFullYear() + "-" + parseInt(date.getMonth() + 1) + "-" + parseInt(date.getDate() - 1) + " " + parseInt(24 - date.getHours()) + ":" + date.getMinutes() + ":" + date.getSeconds()
        } else {
          var historyDate = date.getFullYear() + "-" + parseInt(date.getMonth() + 1) + "-" + date.getDate() + " " + parseInt(date.getHours() - 6) + ":" + date.getMinutes() + ":" + date.getSeconds()
        }
        var currenyDate = date.getFullYear() + "-" + parseInt(date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
        axios.get("http://47.52.241.237:8088/marketData/ticker?beginDate=" + historyDate + "&endDate=" + currenyDate + "&exchangeName=" + this.exchangeName + "&currencyPair=" + this.currencyPair.replace('/', "-") + "&type=minute_1").then((res) => {
          if (res.data.success) {
            this.chartData.rows=[];
            this.quotationList = res.data.data;
            res.data.data.forEach((v) => {
              this.chartData.rows.push({
                "日期": new Date(v.intervalDate).getFullYear() + "-" + parseInt(new Date(v.intervalDate).getMonth() + 1) + "-" + date.getDate(),
                "open": v.open,
                'close': v.close,
                'lowest': v.lowest,
                'highest': v.highest,
              })
            })
            // 获取数组中的最后一个元素(展示头部)
            this.quotationObj = res.data.data.pop();
          }
        })
      },
      //获取当前币下的行情
      getTypeCurrency() {
        var type = this.currencyPair.replace("/", "-")
        axios.get("http://47.52.241.237:8088/marketData/" + this.exchangeName + "/" + type + "/relation").then((res) => {
          if (res.data.success) {
            this.currencyList = res.data.data;
          }
        })
      },
      // 简介
      getIntroduction() {
        var type = this.currencyPair.replace("/", "-")
        axios.get("http://47.52.241.237:8088/marketData/" + type + "/summary").then((res) => {
          if (res.data.success) {
            this.introduction = res.data.data;
          }
        })
      },
      // 点击行情刷新当前页面的数据
      getCurr(curr) {
        this.exchangeName = curr.exchange
        this.currencyPair = curr.currencyPair;
        this.getIntroduction();
        if (this.exchangeName == '全网') {
          this.exchangeName = 'global'
        }
        this.socket.emit('subscribe', this.exchangeName + '.' + this.currencyPair + '.minute');
        this.getHistoricalData();
      }
    },

    components: {
      XHeader,
      VeCandle
    }
  }
</script>
<style lang="less" scoped>
  body {
    background: #f6f6f6;
  }

  .quotesDetail .vux-header {
    background: #fff;
  }

  .quotesDetail .bt {
    border-bottom: 1px solid #f6f6f6;
  }

  .quotesDetail .activeColor {
    color: #fea620 !important;
  }

  .quotesDetail .mgt8 {
    margin-top: 8px;
  }

  .quotesDetail .c3 {
    color: #333;
  }

  .quotesDetail .c6 {
    color: #666;
  }

  .quotesDetail .c9 {
    color: #999;
  }

  .quotesDetail .fr {
    position: relative;
  }

  .quotesDetail .fa {
    position: absolute;
  }

  .quotesDetail .r10 {
    right: 10px;
  }

  .quotateBox {
    background: #fff;
    height: 80px;
  }

  .quotesDetail .mgt15 {
    margin-top: 15px;
  }

  .quotesDetail .c9 {
    color: #999;
  }

  .quotesDetail .f15 {
    font-size: 15px;
  }

  .quotesDetail .f14 {
    font-size: 14px;
  }

  .quotesDetail .searchCurrency {
    position: absolute;
    right: 15px;
    top: 13px;
  }

  .quotesDetail .transactionMoeny {
    position: absolute;
    right: 10px;
  }

  .mgT13 {
    margin-top: 13px;
  }

  .quotesDetail .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .quotesDetail .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
  }

  .quotesDetail .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: linear-gradient(left, #fed52d, #fe9e0a);
    background: -webkit-gradient(linear, left top, right top, from(#fed52d), to(#fe9e0a));
  }

  .quotesDetail .quotesTitle {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
  }

  .quotesDetail .contQuotes {
    background: #fff;
    li {
      height: 65px;
      line-height: 65px;
      border-bottom: 1px solid #f6f6f6;
      padding-left: 10px;
    }
  }

  .quotesDetail .transactionTitle {
    text-align: center;
    padding: 0px 10px;
  }

  .quotesDetail .transactionTitle li {
    float: left;
    list-style: none;
    color: #999;
    font-size: 16px;
    height: 25px;
    line-height: 25px;
    width: 33.33%;
  }

  .quotesDetail .transactionTitle li:first-child {
    text-align: left;
  }

  .quotesDetail .transactionTitle li:nth-child(3n) {
    text-align: right;
  }

  .quotesDetail .transactionContTwo {
    padding: 0px 10px;
    background: #fff;
  }

  .quotesDetail .transactionContTwo li {
    color: #333;
    float: left;
    height: 60px;
    /* line-height: 60px; */
    border-bottom: 1px solid #f6f6f6;
    list-style: none;
    width: 33.33%;
  }

  .quotesDetail .transactionContTwo li:nth-child(2n) {
    text-align: center;
  }

  .quotesDetail .positiveOne {
    background: #81d425 !important;
    color: #fff;
    width: 65px !important;
    height: 25px !important;
    line-height: 25px !important;
    display: inline-block;
    border-radius: 5px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 15px;
    color: #fff;
  }

  .quotesDetail .negativeOne {
    background: #ff1010 !important;
    color: #fff;
    width: 65px !important;
    height: 25px !important;
    line-height: 25px !important;
    display: inline-block;
    border-radius: 5px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 15px;
    color: #fff;
  }

  .quotesDetail .quotestext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
    text-align: right;
  }

  .navBtnetf {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>